<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论（最多120字）" maxlength="120" v-model="msg"></textarea>
         <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
         <div class="cmt-list">
             <div class="cmt-item" v-for="(item,i) in commentlist" :key="item.id">
                 <div class="cmt-title">
                     第{{i+1}}楼用户：{{item.user_name}}；发表时间：{{item.add_time | dateFormat}}
                 </div>
                 <div class="cmt-body">
                     {{item.content}}
                 </div>
             </div>
            
         </div>
         <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            commentlist:[],
            pageIndex:1,
            msg: '' //评论输入的内容
          
        }
    },
    created(){
        this.getcommentlist();
    },
    methods:{
        getcommentlist(){
            this.$http.get('src/json/comment.json'+"?pageindex"+this.pageIndex).then(result=>{
                if(result.body.status === 0){
                    //每当获取新评论数据的时候，以老数据拼接新数据
                    this.commentlist = this.commentlist.concat(result.body.message);
                }else{
                    Toast("评论获取失败")
                }
            })
        },
        getmore(){
            this.pageIndex++;
            this.getcommentlist();
        },
        postcomment(){
            if(this.msg.trim().length === 0){
                return Toast("评论内容不能为空！")
            }
            //提交的数据对象为content:this.msg
            //定义提交的时候，表单中数据的格式{emulateJSON:true}
            this.$http.post('src/json/postcomment.json',{content:this.msg.trim()}).then(result=>{
                var cmt = { 
                    user_name:'匿名用户',
                    add_name:Date.now(),
                    content: this.msg.trim()
                };
                this.commonlist.unshift(cmt);
                this.msg ='';
            })
        }
    }
}
</script>
<style scoped>
    h3{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-item{
        margin: 5px 0;
    }
    .cmt-title{
        background-color: #ccc;
        font-size: 13px;
    }
    .cmt-body{
        line-height: 35px;
        text-indent: 2em; 
    }
</style>